.header {
  height: 88upx;
  width: 100%;
  background: #fff;
}
.nav {
  padding: 20upx 0;
  & > view {
    width: 192rpx;
    height: 52rpx;
    text-align: center;
    line-height: 52upx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    font-size: 24rpx;
    color: #9695a3;
    margin-right: 52upx;
  }
  .nav-ac {
    background: #da4334;
    color: #ffffff;
  }
}
.mb16 {
  margin-bottom: 16upx;
}
.tip {
  padding: 20upx 32upx;
  font-size: 24rpx;
  color: #a0a0a0;
}
.del {
  font-size: 24rpx;
  color: #da4334;
}
.add-icon {
  padding: 22upx 0;
  & > image {
    width: 40upx;
    height: 40upx;
  }
}
.wrap {
  background: #fff;
  padding: 0 32upx;

  .box {
    padding: 28upx 0;
    font-size: 32rpx;
    border-bottom: 1rpx solid #e4e4e4;
    & > view {
      font-size: 32rpx;
      color: #161616;
    }
    & > input {
      height: 28upx;
      margin-top: 28upx;
    }

    .box-b {
      margin-top: 28upx;
      & > input {
        height: 28upx;
      }
      & > image {
        width: 12upx;
        height: 21upx;
      }
    }
    ::-webkit-input-placeholder {
      color: #a0a0a0;
    }
  }

  .l-wrap {
    padding: 58upx 8upx 30upx 54upx;
    .l-box {
      position: relative;
      margin-bottom: 38upx;
      &-c {
        position: absolute;
        top: 0;
        left: -32upx;
        width: 16rpx;
        height: 16rpx;
        background: #d7d7d7;
        border-radius: 50%;
      }
      &-line {
        position: absolute;
        top: 28upx;
        left: -25upx;
        width: 2upx;
        height: 100upx;
        background: #d7d7d7;
      }
      &-title {
        font-size: 24rpx;
        color: #a0a0a0;
        & > view:nth-of-type(1) {
          font-size: 32rpx;
          color: #3d3d3d;
          margin-bottom: 12upx;
        }
      }
      &-r {
        &-t {
          font-size: 24rpx;
          color: #a0a0a0;
          & > image {
            width: 68rpx;
            height: 68rpx;
            margin-bottom: 8upx;
          }
        }
        .arrow {
          width: 32upx;
          height: 32upx;
          margin-left: 10upx;
          margin-right: 10upx;
          margin-top: 18upx;
        }
        &-add {
          width: 68rpx;
          height: 68rpx;
          background: #ffffff;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 2rpx solid #ededed;
          & > image {
            width: 36upx;
            height: 36upx;
          }
        }
      }
    }
  }
}
.footer {
  background: #fff;
  padding: 8upx 32upx;

  padding-bottom: env(safe-area-inset-bottom);
  .box-icon {
    font-size: 24rpx;
    color: #000000;
    & > image {
      width: 39upx;
      height: 38upx;
      margin-bottom: 10upx;
    }
  }
  .btn {
    width: 580rpx;
    height: 80rpx;
    background: #da4334;
    border-radius: 422rpx 422rpx 422rpx 422rpx;
    border: 1rpx solid #dafbff;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80upx;
  }
}
.nav1 {
  height: 88rpx;
  background: #ffffff;
  font-size: 32rpx;
  color: #161616;
  box-sizing: border-box;
  padding: 0 32upx;
  .d-icon {
    width: 20rpx;
    height: 13rpx;
    margin-left: 18upx;
  }
  &-text {
    font-size: 28rpx;
    color: #da4334;
    margin-left: 6upx;
  }
  .e-icon {
    width: 28rpx;
    height: 28rpx;
  }
}
.time-box {
  padding: 30upx 32upx 16upx;
  font-size: 28rpx;
  color: #1c2127;
  .d1-icon {
    width: 12upx;
    height: 12upx;
    margin-left: 4upx;
  }
  &-text {
    font-size: 24rpx;
    color: #6f6e74;
    margin-top: 48upx;
  }
}
.wrap1 {
  background: #fff;
  padding: 28upx 32upx;
  font-size: 28rpx;
  color: #171717;
  &-num {
    font-size: 48rpx;
    padding: 48upx 0;
    border-bottom: 1rpx solid #e4e4e4;
  }
  &-des {
    font-size: 28rpx;
    color: #161616;
    margin: 28upx 0 26upx;
  }
  &-tip {
    font-size: 24rpx;
    color: #161616;
    margin-bottom: 20upx;
    .d {
      width: 12rpx;
      height: 8rpx;
      margin-left: 12upx;
    }
  }
  &-text {
    height: 28rpx;
    width: 80upx;
    text-align: center;
    line-height: 28upx;
    border-bottom: 1upx solid #000;
  }
  .ml76 {
    margin-left: 76upx;
  }
}
.popup-wrap {
  padding: 34upx 32upx 0;
  width: 100%;
  box-sizing: border-box;
  .pop-header {
    position: relative;
    font-weight: bold;
    text-align: center;
    font-size: 28rpx;
    color: #181818;
    margin-bottom: 50upx;
    & > image {
      position: absolute;
      width: 32upx;
      height: 32upx;
      left: 30upx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .popup-box {
    flex-wrap: wrap;
    margin-bottom: 200upx;
    & > view {
      width: 320rpx;
      height: 76rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: 2rpx solid #eaeaea;
      text-align: center;
      line-height: 76upx;
      font-size: 26rpx;
      color: #171717;
      margin-bottom: 20upx;
    }
    .time-ac {
      border: 2rpx solid #da4334;
      color: #da4334;
    }
  }
}
.search {
  width: 702rpx;
  height: 68rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.06);
  margin: 0 auto 20upx;
  box-sizing: border-box;
  padding: 0 20upx;
  font-size: 28rpx;
  & > image {
    width: 32upx;
    height: 32upx;
    margin-right: 16upx;
  }
}
.content-wrap {
  padding: 0 24upx;
  .content-box {
    padding: 32upx 32upx 28upx;
    background: #fff;
    margin-bottom: 20upx;
    font-size: 24rpx;
    color: #8d8d8d;
    .t {
      font-size: 32rpx;
      color: #171717;
    }
    .t1 {
      color: #afafaf;
    }
    .no {
      margin-top: 30upx;
      margin-bottom: 12upx;
      color: #8d8d8d;
    }
    .t2 {
      color: #8d8d8d;
    }
    .mb12 {
      margin-bottom: 12upx;
    }
    .ac {
      font-size: 26rpx;
      color: #8d8d8d;
    }
    .ac1 {
      font-size: 26rpx;
      color: #171717;
    }
    .img {
      width: 40upx;
      height: 40upx;
      margin-right: 8upx;
    }
    .ac2 {
      font-size: 26rpx;
      color: #f17303;
    }
    .ac3 {
      font-size: 26rpx;
      color: #0cb18e;
    }
    .ac4 {
      font-size: 26rpx;
      color: #8d8d8d;
    }
    .mt34 {
      margin-top: 34upx;
    }
  }
}
.popup-bt {
  & > view {
    padding: 40upx 0 38upx;
    text-align: center;
    font-size: 28rpx;
    color: #000000;
  }
  &-b {
    border-bottom: 1upx solid #f4f8fa;
  }
  &-b16 {
    border-bottom: 16upx solid #f4f8fa;
  }
  .bt-ac {
    color: #da4334;
  }
}
.search {
  width: 702rpx;
  height: 68rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.06);
  margin: 20upx auto;
  box-sizing: border-box;
  padding: 0 20upx;
  font-size: 28rpx;
  & > image {
    width: 32upx;
    height: 32upx;
    margin-right: 16upx;
  }
}
.content-wrap {
  padding: 0 24upx;
  .content-box {
    padding: 32upx 32upx 28upx;
    background: #fff;
    margin-bottom: 20upx;
    font-size: 24rpx;
    color: #8d8d8d;
    .t {
      font-size: 32rpx;
      color: #171717;
    }
    .t1 {
      color: #afafaf;
    }
    .no {
      margin-top: 30upx;
      margin-bottom: 12upx;
      color: #8d8d8d;
    }
    .t2 {
      color: #8d8d8d;
    }
    .mb12 {
      margin-bottom: 12upx;
    }
    .ac {
      font-size: 26rpx;
      color: #8d8d8d;
    }
    .ac1 {
      font-size: 26rpx;
      color: #171717;
    }
    .img {
      width: 40upx;
      height: 40upx;
      margin-right: 8upx;
    }
    .ac2 {
      font-size: 26rpx;
      color: #f17303;
    }
    .ac3 {
      font-size: 26rpx;
      color: #0cb18e;
    }
    .ac4 {
      font-size: 26rpx;
      color: #8d8d8d;
    }
    .mt34 {
      margin-top: 34upx;
    }
  }
}
